import VConsole from "vconsole";
<template>
    <div class="wl-upload-img">
        <img :src="localIds001" class="show-img" @click="btnAction"/>
    </div>
</template>

<script>
import wx from 'weixin-js-sdk'
import img from '../../../../../assets/images/backIdcard2.png'
import VConsole from 'vconsole'

export default {
  name: 'WlUploadImg',
  data () {
    return {
      serverId: '',
      localIds001: img,
      clickFalse: true,
      debug: false
    }
  },
  props: {
    result: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  model: {
    prop: 'result',
    event: 'change'
  },
  methods: {
    uploadImgAction () {
      let _this = this
      this.$common.wxCallBack(function () {
        wx.chooseImage({
          count: 1,
          sourceType: ['album', 'camera'],
          success: res => {
            console.log(res)
            if (res.errMsg === 'chooseImage:ok') {
              let localIds001 = res.localIds[0]
              wx.getLocalImgData({
                localId: localIds001, // 图片的localID
                success: function (res) {
                  if (res.localData.indexOf('data:image') !== -1) {
                    _this.localIds001 = res.localData
                  } else {
                    _this.localIds001 = 'data:image/png;base64,' + res.localData
                  }
                  // localData是图片的base64数据，可以用img标签显示
                }
              })
              wx.uploadImage({
                localId: localIds001, // 需要上传的图片的本地ID，由chooseImage接口获得
                isShowProgressTips: 1, // 默认为1，显示进度提示
                success: function (res1) {
                  _this.serverId = res1.serverId// 返回图片的服务器端ID
                  _this.$emit('change', res1.serverId)
                  _this.clickFalse = true
                }
              })
            } else {
              _this.clickFalse = true
            }
          }
        })
      }, this.debug)
    },
    btnAction () {
      if (this.clickFalse === true) {
        console.log('点击了1')
        this.clickFalse = false
        setTimeout(() => {
          this.clickFalse = true
        }, 3000)
        this.uploadImgAction()
      }
    }
  },
  mounted () {
    if (this.$route.query.debug === 'debug') {
      let a = new VConsole()
      console.log(a)
      this.debug = true
    }
  }
}
</script>

<style scoped lang="less">
    .wl-upload-img {
        /*width: 96%;
        padding-left: 2%;
        padding-right: 2%;*/
        overflow: hidden;
        padding-top: calc(584 / 920 * 100%);
        position: relative;

        .show-img {
            position: absolute;
            width: 96%;
            height: 100%;
            top: 0;
            left: 2%;
        }
    }
</style>
